<template>
  <div class="settlement-page">
    <h1 class="page-title">结算页面</h1>
    <el-card class="cart-card">
      <!-- 商品列表 -->
      <div v-for="(item, index) in Cart" :key="index" class="cart-item">
        <!-- 商品图片 -->
        <el-avatar shape="square" :size="80" :src="image + item.Images" class="item-image"></el-avatar>
        <!-- 商品信息 -->
        <div class="item-info">
          <div class="item-name">{{ item.Name}}</div>
          <div class="item-price">单价：{{ item.Price }} 元</div>
          <div class="item-quantity">数量：{{ item.OrderNumber }}</div>
          <div class="item-total">小计：{{ item.TotalAmount }} 元</div>
        </div>
        <div style="display: inline-block;">
              <el-input v-model="item.Notes" label="备注" placeholder="请输入备注"></el-input>
        </div>
      </div>
      <!-- 总价 -->
      <div class="total-price">
        总价：{{ Cart.reduce((acc, cur) => acc + cur.TotalAmount, 0) }} 元
      </div>
      <!-- 结算按钮 -->
      <div class="settle-button">
        <el-button type="primary" @click="handleSettlement">立即结算</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import bases from '../../plugins/base.js'
export default {
  data() {
    return {
      Cart: this.$store.state.Cart,
      image: bases.imgUrl,
    }
  },
  methods: {
    handleSettlement() {

      // 这里可以添加结算逻辑，比如提交订单等
      this.axios({
          method:'post',
          url:'Orders',
          data:this.Cart
      }).then(res=>{
        console.log(res);
          if(res.data.code>0){
              this.$message.success("结算OK！");
              this.$router.push('/control/order'); // 跳转到下单页面
          }else{
              this.$message.error("结算失败！");
          }
      }).catch(err=>{
        console.log(err);
        this.$message.error('结算失败！')
      })
    }
  }
}
</script>

<style scoped>
.settlement-page {
  padding: 20px;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.page-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.cart-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.item-image {
  margin-right: 20px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.item-price,
.item-quantity,
.item-total {
  font-size: 14px;
  color: #666;
  margin-bottom: 3px;
}

.total-price {
  text-align: right;
  font-size: 18px;
  font-weight: 600;
  color: #ff4949;
  margin-top: 20px;
  margin-bottom: 20px;
}

.settle-button {
  text-align: right;
}
</style>